<template>
	<view class="coupon-wrapper full box relative flex column bg-primary">
		<view class="tab-wrap w-100 relative" id="tabsWrap">
			<view class="tab-item" v-for="(item,index) in tabList" :class="{active:index === activeTab}" :key="index"
				@click="changeTab(index)">
				<text>{{ item.label }}</text>
			</view>
			<view class="tab-slide" :style="{'--left':tabRect[activeTab]}"></view>
		</view>
		<view class="relative flex-1 box w-100 main-wrapper">
			<view class="absolute inset box" id="mainConn">
				<mescroll-uni :up="{use:false}" :down="{auto:false}" :fixed="false" @init="mescrollInit"
					@down="downCallback" @up="upCallback">
					<view class="mes-inner box relative" :style="{'--height':height}">
						<swiper class="full" :current="activeTab" @change="swiperChange">
							<swiper-item class="full box" v-for="(item,index) in tabList" :key="item.value">
								<list-vue :ref="`coupon_${index}`" :type="item.value" />
							</swiper-item>
						</swiper>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	// import mescrollUni from "@/js_sdk/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import ListVue from './com/coupon-list.vue'
	export default {
		components: { ListVue, },
		onReady() {
			this.initRect()
		},
		methods: {
			downCallback() {
				this.triggerUpdate(this.activeTab)
				setTimeout(() => {
					this.mescroll.endSuccess(true)
				}, 300)
			},
			triggerUpdate(index) {
				const refName = `coupon_${index}`
				const [refTarget] = this.$refs[refName]
				if (!refTarget) return
				if (index === 0) {
					return refTarget.initData(true)
				}
				return refTarget.getMyList(true)
			},
			swiperChange(ev) {
				this.activeTab = ev.detail.current
			},
			changeTab(v) {
				if (v === this.activeTab) return
				this.activeTab = v
			},
			initRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.selectAll('#tabsWrap .tab-item').boundingClientRect()
				selector.select('#tabsWrap .tab-slide').boundingClientRect()
				selector.select('#mainConn').boundingClientRect()
				selector.exec(resp => {
					const [items, slide, main] = resp
					this.height = main.height
					console.log(this.height, 'height');
					const { width: slideWidth } = slide
					this.tabRect = items.map(item => {
						return item.left + (item.width / 2) - (slideWidth / 2)
					})
					selector = null
				})
			},
		},
		computed: {
			tabList() {
				return [{
					label: '可领取',
					value: 0
				}, {
					label: '已拥有',
					value: 1
				}]
			}
		},
		data() {
			return {
				activeTab: 0,
				tabRect: [0, 0],
				height: 520,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-wrapper {
		::v-deep .mescroll-bottombar {
			display: none !important;
			height: 0 !important;
		}

		.mes-inner {
			width: 100%;
			height: calc(1px * var(--height));

		}

		.main-wrapper {
			margin-top: 30rpx;
		}

		.tab-wrap {
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E7E7E7;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0 80rpx;

			.tab-item {
				width: 112rpx;
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.6);
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all cubic-bezier(0.165, 0.84, 0.44, 1) .1s .1s;

				&.active {
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
				}
			}

			.tab-slide {
				position: absolute;
				width: 112rpx;
				height: 3rpx;
				background: rgba(0, 0, 0, 0.9);
				left: calc(1px * var(--left));
				bottom: 0;
				transition: left cubic-bezier(0.23, 1, 0.320, 1) .2s;

			}
		}
	}
</style>